<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>日期demo</title>
    <style type="text/css">
      /*日期样式*/
      * {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
      }
      #calendar {
        width: 210px;
        overflow: hidden;
        border: 1px solid #000;
        padding: 10px;
        position: relative;
      }
      #calendar h4 {
        text-align: center;
        margin-bottom: 30px;
      }
      #calendar .a1 {
        position: absolute;
        top: 30px;
        left: 10px;
      }
      #calendar .a2 {
        position: absolute;
        top: 30px;
        right: 10px;
      }
      #calendar .a3 {
        position: absolute;
        top: 30px;
        right: 90px;
      }
      #calendar .week {
        height: 30px;
        line-height: 20px;
        border-bottom: 1px solid #000;
        margin-bottom: 10px;
      }
      #calendar .week li {
        float: left;
        width: 30px;
        height: 30px;
        text-align: center;
        list-style: none;
      }
      #calendar .dateList {
        overflow: hidden;
        clear: both;
      }
      #calendar .dateList li {
        float: left;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        list-style: none;
      }
      #calendar .dateList .ccc {
        color: #ccc;
      }
      #calendar .dateList .red {
        background: #f90;
        color: #fff;
      }
      #calendar .dateList .sun {
        color: #f00;
      }
    </style>
  </head>
  <body>
    <div id="calendar">
      <h4>2017年10月</h4>
      <a href="##" class="a1"><<上月</a>
      <a href="##" class="a3" id="today2">【今天】</a>
      <a href="##" class="a2">下月>></a>
      <ul class="week">
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
      </ul>
      <ul class="dateList"></ul>
    </div>
  </body>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      //必要的数据
      //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？
      var iNow = 0;

      function run(n) {
        var oDate = new Date(); //定义时间
        oDate.setMonth(oDate.getMonth() + n); //设置月份
        var year = oDate.getFullYear(); //年
        var month = oDate.getMonth(); //月
        var today = oDate.getDate(); //日

        //计算本月有多少天
        var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];

        //判断闰年
        if (month == 1) {
          //2月份
          //能被4整除且不能被100整除或者能被400整除
          if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
            allDay = 29;
          }
        }

        //判断本月第一天是星期几
        oDate.setDate(1); //时间调整到本月第一天
        var week = oDate.getDay(); //读取本月第一天是星期几

        //console.log(week);
        $(".dateList").empty(); //每次清空
        //插入空白

        for (var i = 0; i < week; i++) {
          //前面添加空li标签
          $(".dateList").append("<li></li>");
        }

        //日期插入到dateList
        for (var i = 1; i <= allDay; i++) {
          $(".dateList").append("<li>" + i + "</li>");
        }
        //标记颜色=====================
        $(".dateList li").each(function(i, elm) {
          //console.log(index,elm);
          var val = $(this).text();
          console.log(val);
          if (n == 0) {
            if (val < today) {
              $(this).addClass("ccc");
            } else if (val == today) {
              $(this).addClass("red");
            } else if (i % 7 == 0 || i % 7 == 6) {
              $(this).addClass("sun");
            }
          } else if (n < 0) {
            $(this).addClass("ccc");
          } else if (i % 7 == 0 || i % 7 == 6) {
            $(this).addClass("sun");
          }
        });

        //定义标题日期
        $("#calendar h4").text(year + "年" + (month + 1) + "月");
      }
      run(0);

      $(".a1").click(function() {
        iNow--;
        run(iNow);
      });

      $(".a2").click(function() {
        iNow++;
        run(iNow);
      });
      $(".a3").click(function() {
        run(0);
      });
    });
  </script>
</html>
